<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <script src="/static/stv/common/jquery/dist/jquery.js"></script>
            <script src="/static/stv/common/bootstrap/dist/js/bootstrap.min.js"></script>
         <link href="/static/stv/common/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <style>
            @import '/static/stv/common/font-awesome/css/font-awesome.min.css';


            *,*:after,*:before{
                box-sizing: border-box;
            }

            html{
                box-sizing: inherit;
                background: linear-gradient(to left, #8e9eab , #eef2f3);
            }
            body{
                margin: 10% auto;
                text-align: center;
                font-size: 12px;
            }


            .select{
                position: relative;
                display: block;
                margin: 0 auto;
                width: 100%;
                max-width: 325px;
                color: #cccccc;
                vertical-align: middle;
                text-align: left;
                user-select: none;
                -webkit-touch-callout: none;

                .placeholder{
                    position: relative;
                    display: block;
                    background-color: #393d41;
                    z-index: 1;
                    padding: 1em;
                    border-radius: 2px;
                    cursor: pointer;

                    &:hover{
                        background: darken(#393d41,2%);
                    }

                    &:after{
                        position: absolute;
                        right: 1em;
                        top: 50%;
                        transform: translateY(-50%);
                        font-family: 'FontAwesome';
                        content: '\f078';
                        z-index: 10;
                    }
                }

                &.is-open{
                    .placeholder:after{
                        content: '\f077';
                    }
                    ul{
                        display: block;
                    }
                }

                &.select--white{
                    .placeholder{
                        background: #fff;
                        color: #999;
                        &:hover{
                            background: darken(#fff,2%);
                        }
                    }
                }

                ul{
                    display: none;
                    position: absolute;
                    overflow: hidden;
                    overflow-y: auto;
                    width: 100%;
                    background: #fff;
                    border-radius: 2px;
                    top: 100%;
                    left: 0;
                    list-style: none;
                    margin: 5px 0 0 0;
                    padding: 0;
                    z-index: 100;
                    max-height: 120px;

                    li{
                        display: block;
                        text-align: left;
                        padding: 0.8em 1em 0.8em 1em;
                        color: #999;
                        cursor: pointer;

                        &:hover{
                            background: #4ebbf0;
                            color: #fff;
                        }
                    }
                }
            }

        </style>
    </head>
    <body>
        <div class="select">
            <span class="placeholder">Select your language</span>
            <ul>
                <li data-value="es">España- Español</li>
                <li data-value="en">United States - English</li>
                <li data-value="fr">France - Français</li>
                <li data-value="de">Deutschland - Deutsch</li>
            </ul>
            <input type="hidden" name="changeme"/>
        </div>

        <br>

        <div class="select select--white">
            <span class="placeholder">Select your language</span>
            <ul>
                <li data-value="es">España- Español</li>
                <li data-value="en">United States - English</li>
                <li data-value="fr">France - Français</li>
                <li data-value="de">Deutschland - Deutsch</li>
            </ul>
            <input type="hidden" name="changemetoo"/>
        </div>
        <script>
            $('.select').on('click', '.placeholder', function () {
                var parent = $(this).closest('.select');
                if (!parent.hasClass('is-open')) {
                    parent.addClass('is-open');
                    $('.select.is-open').not(parent).removeClass('is-open');
                } else {
                    parent.removeClass('is-open');
                }
            }).on('click', 'ul>li', function () {
                var parent = $(this).closest('.select');
                parent.removeClass('is-open').find('.placeholder').text($(this).text());
                parent.find('input[type=hidden]').attr('value', $(this).attr('data-value'));
            });
        </script>
    </body>
</html>
